<template>
	<view class="content">
		<u-navbar :title="$t('password.navtitle')" :autoBack="true" bgColor="#292929" leftIconColor="#FFFFFF"
			:titleStyle="{color:'#FFFFFF',fontSize:'40rpx'}" />
		<view class="main">
			<u--form labelPosition="top" :borderBottom="false" :labelStyle="{color:'#fff'}" labelWidth="auto"
				:model="userInfo" :rules="rules" ref="uForm">
				<u-form-item :label="$t('input.email')" prop="email" ref="item1">
					<u--input v-model="userInfo.email" placeholderClass="placeholderStyle" border="none"
						:placeholder="$t('input.email')" class="formitem input-border" />
				</u-form-item>
				<u-form-item :label="$t('password.emailCode')" prop="code" ref="item1" class="choose-box">
					<u--input v-model="userInfo.code" placeholderClass="placeholderStyle" border="none"
						:placeholder="$t('input.code')" class="formitem input-border" />
					<view class="downbth input-border">
						<text class="bthtext" v-if="!showTime" @click="sendEmail">{{$t('password.emailbth')}}</text>
						<u-count-down v-else :time="60 * 1000" format="ss" @change="onChange" @finish="showTime = false">
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds+'s' }}</text>
							</view>
						</u-count-down>
					</view>
				</u-form-item>
				<u-form-item :label="$t('password.newPassword')" prop="password" ref="item1">
					<u--input :password="true" v-model="userInfo.password" placeholderClass="placeholderStyle"
						border="none" :placeholder="$t('password.newPassword')" class="formitem input-border" />
				</u-form-item>
				<u-form-item :label="$t('password.aginPassword')" prop="aginPassword" ref="item1">
					<u--input :password="true" v-model="userInfo.aginPassword" placeholderClass="placeholderStyle"
						border="none" :placeholder="$t('password.aginPassword')" class="formitem input-border" />
				</u-form-item>
			</u--form>
			<button class="loginBth" @click="tochange">{{$t('password.sumbit')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime: false,
				timeData: {},
				userInfo: {
					password: "",
					email: "",
					code: "",
					aginPassword: ""
				},
			}
		},
		computed: {
			rules() {
				return {
					'password': {
						type: 'string',
						required: true,
						message: this.$t('err.newPassword'),
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: this.$t('err.code'),
						trigger: ['blur', 'change']
					},
					'email': [{
							type: 'string',
							required: true,
							message: this.$t('err.email'),
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
								if (!reg.test(value)) {
									callback(new Error(this.$t('err.email1')));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					'aginPassword': [{
							required: true,
							message: this.$t('err.aginPassword'),
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value !== this.userInfo.password) {
									callback(new Error(this.$t('err.aginPassword1')));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			async sendEmail() {
				if(!this.userInfo.email)return uni.$u.toast(this.$t('err.email'))
				   const {
				   	data: res
				   } = await this.$api('/front/sendCaptchaEmail', 'GET',{email:this.userInfo.email})
				   console.log(res)
				   if(res.code==200)this.showTime=true
                   else uni.$u.toast(res.msg)
			},
			tochange() {
				this.$refs.uForm.validate().then(async (succ) => {
					const {
						data: res
					} = await this.$api('/front/forgotPassword', 'POST',this.userInfo)
					// console.log(res)
					if(res.code==200){
						uni.navigateTo({
							url:'/pages/changeStatus/changeStatus?status=passwordsuccess'
						})
					}else{
						uni.navigateTo({
							url:'/pages/changeStatus/changeStatus?status=passwordfail&msg='+res.msg
						})
					}
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.placeholderStyle {
		color: #c4c4c4;
		font-weight: bold;
	}

	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #000000 0%, #3C3C3C 100%);
		font-family: my-font;

		.main {
			width: 100vw;
			box-sizing: border-box;
			padding: 0 95rpx;
			padding-top: 230rpx;

			.choose-box {
				/deep/.u-form-item__body__right__content__slot {
					position: relative;

					.downbth {
						position: absolute;
						z-index: 999;
						width: 180rpx;
						height: 84rpx;
						right: 0;
						top: 0;
						text-align: center;
						border-radius: 17rpx;
						border: 2rpx solid #B2A5E0;
						line-height: 86rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						background-color: #926FBF;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						.bthtext{
							display: inline-block;
							width: 100%;
							text-align: center;
						}
                        .time__custom{
							width: 100%;
							text-align: center;
							color: #FFFFFF;
							font-size: 24rpx;
						}
						image {
							width: 30rpx;
							height: 17rpx;
						}
					}
				}

			}

			.formitem {
				width: 100%;
				line-height: 89rpx;
				box-sizing: border-box;
				height: 89rpx;
				border-radius: 17rpx;
				text-indent: 25rpx;
				color: #fff;
				font-size: 24rpx;
			}

			.loginBth {
				width: 100%;
				height: 89rpx;
				margin-top: 120rpx;
				border-radius: 17rpx;
				font-size: 25rpx;
				line-height: 89rpx;
				color: #fff;
				background-color: #926FBF;
			}

			.loginTips {
				color: #fff;
				font-size: 20rpx;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>